<template>
    <section class="table_panel">
  		 <el-table
		    :data="tableData"
		    center
		    stripe
		    style="text-align: center;">
		     <!--************-->
		     <el-table-column
		       label="序号"
		      align="center"
		      >
		       <template slot-scope="scope" >
		        <span  >{{ Number(scope.$index)+1  }}</span>
		      </template>
		    </el-table-column>
		     <!--************-->
		     <!--************-->
		    <el-table-column
		      :prop="key"
		      :label="val"
		      align="center"
		      v-for = "(val,key)  in tableLabel"
		      :key = "key"
		      >
		    </el-table-column>
		     <!--************-->
		      <!--************-->
		    <el-table-column
		       label="操作"
		       align="center"
		      >
		       <template slot-scope="scope">
		        <span  class="deal">设备维修</span>
		      </template>
		    </el-table-column>
		     <!--************-->
		  </el-table>
		  	<div class="pages">
		  		<span class="extra">共{{page.total}}条  共{{pages}}条</span>
			    <el-pagination
			      @current-change="handleCurrentChange"
			     background
			      :page-size="page.size"
			      prev-text = "上一页"
			      next-text	="下一页"
			      layout=" prev, pager, next"
			      :total="page.total">
			    </el-pagination>
		  	</div>
		  		
		  
    </section>
</template>

<script>
    
    export default {
    	props:{
    		tableLabel:Object,
    		tableData:Array,
    		page:Object,
    	},
        data() {
          return {
          
          };
        },
        methods: {
        		handleCurrentChange(){
        			
        		}
        },
        computed:{
        	pages(){
        		return this.page.total/this.page.size
        	}
        }
  };
</script>

<style >/*改插件的样式，好像没有什么好方法呢*/
    .table_panel .el-pagination{
    	float: right;
    }
    
    .table_panel .extra{
    	 display: inline-block;
	    height: 32px;
	    line-height: 32px;
	    font-size: 13px;
	    letter-spacing: 2px;
	    float: left;
	    color: #787878;
    }
    .table_panel .deal{
    	color: #125AD2;
    }
    
    .table_panel .el-pagination span:not([class*=suffix]){
    	    min-width: 60.5px;
    }
     .table_panel .el-pagination.is-background .el-pager li:not(.disabled).active{
     	background-color: #125AD2;
     }
      .table_panel .el-pagination.is-background .el-pager li {
     	    background-color: #fff;
     	     border: solid 1px #e1e1e1;
     	     margin: unset;
     }
      .table_panel .el-pagination.is-background .btn-next,.table_panel .el-pagination.is-background .btn-prev{
     	 background-color: #fff;
     	 border: solid 1px #e1e1e1;
     }
     .table_panel .el-table th.is-leaf{
     	background: #e6e6e6;
     }
     .table_panel .el-table th>.cell{
     	color: #333333;
     }
     .table_panel .el-table td{
     	padding: 7px 0;
     }
    .table_panel .pages{
    	
    }
</style>